<html>
<head>
    <title></title>

    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>

        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
        }

        .chart-outer{
            height: 300px;
            width: 97%;
        }
        .tab-title{
            margin-top: 20px;
            text-align: center;
            font-size: larger;
            color: #333333;
            font-weight: bold;
        }
        table

        {

            border-collapse: collapse;

            margin: 0 auto;

            text-align: center;

        }

        table td, table th

        {

            border: 1px solid #cad9ea;

            color: #666;

            height: 30px;

            font-size: xx-small;

        }
        table thead th

        {

            background-color: #CCE8EB;

            width: 100px;

        }

        table tr:nth-child(odd)

        {

            background: #fff;

        }

        table tr:nth-child(even)

        {

            background: #F5FAFA;

        }
    </style>
</head>
<body>
<div id="page-vue">


    <div class="page-title">能效分析</div>
    <div class="page-main">
    <el-col :span="4">
        <dev-tree ref="devTree" v-on:click-node="onTreeNode" :tabsign="'zd'" :energy="'Total'" ></dev-tree>
    </el-col>
    <el-col :span="20">
        <div class="main-head">
            <el-form :inline="true">
                <el-form-item label="">
                    <el-date-picker :type="dateMod" v-model="day" :value-format="dateFormat" placeholder="日期" style="width: 150px;"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-tooltip effect="dark" content="请点击左边树中区域或设备" v-model="tooltip" placement="right">
                    <el-button type="primary" @click="search">查询</el-button>
                    </el-tooltip>
                </el-form-item>
            </el-form>
        </div>
        <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick">
            <el-tab-pane label="实际能耗" name="tab1">

            </el-tab-pane>
            <el-tab-pane label="产量" name="tab2">

            </el-tab-pane>
            <el-tab-pane label="单品能耗" name="tab3">

            </el-tab-pane>
            <el-tab-pane label="定额" name="tab4">

            </el-tab-pane>
            <el-tab-pane label="定额超限" name="tab5">

            </el-tab-pane>
        </el-tabs>
        <div class="chart-outer" id="ChartDiv">
        </div>
        <p class="tab-title">统计</p>
         <table  class="table">
             <thead>
             <tr align="center">
                 <th>
                 </th>
                 <th v-for="(item,index) in dataAll.xdata">{{item}}</th>
             </tr>
             </thead>
             <tr align="center">
                 <td>实际能耗</td>
                 <td v-for="(item,index) in dataAll.data1">{{item}}</td>
             </tr>
             <tr align="center">
                 <td>产量</td>
                 <td v-for="(item,index) in dataAll.data2">{{item}}</td>
             </tr>
             <tr align="center">
                 <td>单品能耗</td>
                 <td v-for="(item,index) in dataAll.data3">{{item}}</td>
             </tr>
             <tr align="center">
                 <td>定额</td>
                 <td v-for="(item,index) in dataAll.data4">{{item}}</td>
             </tr>
             <tr align="center">
                 <td>定额超限</td>
                 <td v-for="(item,index) in dataAll.data5">{{item}}</td>
             </tr>
         </table>
    </el-col>
    </div>
</div>

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-vue',
        data:{
            tabData:[
                {name:'实际',field1:10},
                {name:'预测',field1:10},
                {name:'额度',field1:10},
            ],
            day:'',
            dataFiled:[],
            monthFiled:[{name:"1月",field:''},{name:"2月",field:''},{name:"3月",field:''},{name:"4月",field:''},{name:"5月",field:''},{name:"6月",field:''},{name:"7月",field:''},{name:"8月",field:''},{name:"9月",field:''},{name:"10月",field:''},{name:"11月",field:''},{name:"12月",field:''}],
            dayFiled:[{name:"1日",field:''},{name:"2日",field:''},{name:"3日",field:''},{name:"4日",field:''},{name:"5日",field:''},{name:"6日",field:''},{name:"7日",field:''},{name:"8日",field:''},{name:"9日",field:''},{name:"10日",field:''},{name:"11日",field:''},{name:"12日",field:''},{name:"13日",field:''},{name:"14日",field:''},{name:"15日",field:''},
                {name:"16日",field:''},{name:"17日",field:''},{name:"18日",field:''},{name:"19日",field:''},{name:"20日",field:''},{name:"21日",field:''},{name:"22日",field:''},{name:"23日",field:''},{name:"24日",field:''},{name:"25日",field:''},{name:"26日",field:''},{name:"27日",field:''},{name:"28日",field:''},{name:"29日",field:''},{name:"30日",field:''},{name:"31日",field:''}],
            dateMod:'month',
            tabName:'tab1',
            tabLabel:'实际能耗',
            dateFormat:'',
            currentId:'',
            dataId:'',
            tooltip:false,
            dataAll:{
                data1:[],
                data2:[],
                data3:[],
                data4:[],
                data5:[],
                ydata:[],
                xdata:[],
            },
        },
        methods:{
            search:function(){
                if(this.dataId!=''){
                    this.loadParam();
                }
            },
            onTreeNode:function(data){
                if (data.id.indexOf('Z')==0){
                    this.dataId  = data.dataId;
                }else if (data.id.indexOf('D')==0){
                    this.dataId  = data.attributes.deviceId;
                }else {
                    return;
                }
                this.currentId = data.id;
                this.loadParam();
            },
            onTabClick:function(data){
                this.tabLabel = data.label;
                 switch (data.name) {
                     case 'tab1':
                         this.dataAll.ydata = this.dataAll.data1;
                         break;
                     case 'tab2':
                         this.dataAll.ydata = this.dataAll.data2;
                         break;
                     case 'tab3':
                         this.dataAll.ydata = this.dataAll.data3;
                         break;
                     case 'tab4':
                         this.dataAll.ydata = this.dataAll.data4;
                         break;
                     case 'tab5':
                         this.dataAll.ydata = this.dataAll.data5;
                         break;
                 }
                this.getChart('ChartDiv',this.dataAll);
            },
            loadParam:function(){
                this.tabName = 'tab1';
                this.tabLabel='实际能耗';
                var ids =this.currentId.split('_');
                var dArr = this.day.split('-');
                var param={
                    zoneIds:[this.dataId].join(','),
                    energyType:'Total2Coal',
                    year:dArr[0]||0,
                    month:dArr[1]||0,
                    day:dArr[2]||0,
                };
                switch (ids[0]) {
                    case 'Z':
                        param['zoneType'] = 0;
                        param['sumType'] = 0;
                        break;
                    case 'D':
                        param['zoneType'] = 3;
                        param['sumType'] = 0;
                        break;
                    default:
                        this.getChart('ChartDiv');
                        return;
                        break;
                }
                HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                         if (this.dateMod =='month'){
                             var arr = [];
                              for (var i = 4;i<res.data[0].field03 + 4;i++){
                                  var tmp = i;
                                  tmp=tmp<10?String('0'+tmp):(tmp)
                                  arr.push(res.data[0]['field'+tmp]||0);
                              }
                              this.dataAll.data1 = arr;   //总量
                              arr = [];
                             for (var i = 4+ res.data[0].field03 ;i<res.data[0].field03*2 + 4;i++){
                                 arr.push(res.data[0]['field'+i]||0);
                             }
                             this.dataAll.data2 = arr;  //产量
                             arr = [];
                             for (var i = 4+ res.data[0].field03*2 ;i<res.data[0].field03*3 + 4;i++){
                                 arr.push(res.data[0]['field'+i]||0);
                             }
                             this.dataAll.data3 = arr;  //单产用量
                             arr = [];
                             for (var i = 4+ res.data[0].field03*3 ;i<res.data[0].field03*4 + 4;i++){
                                 arr.push(res.data[0]['field'+i]||0);
                             }
                             this.dataAll.data4 = arr;  //限额
                             arr = [];
                             for (var i = 4+ res.data[0].field03*4 ;i<res.data[0].field03*5 + 4;i++){
                                 arr.push(res.data[0]['field'+i]||0);
                             }
                             this.dataAll.data5 = arr;  //限额比例
                             arr = [];
                             for (var i = 1 ; i<res.data[0].field03+1;i++){
                                   arr.push(i+'日')
                             }
                             this.dataAll.xdata= arr;
                             this.dataAll.ydata = this.dataAll.data1;
                         }else if (this.dateMod = 'year') {
                             var arr = [];
                             for (var i = 2 ; i<14;i++){
                                 var tmp = i;
                                 tmp=tmp<10?String('0'+tmp):(tmp)
                                 arr.push(res.data[0]['field'+tmp]||0);
                             }
                             this.dataAll.data1 = arr;   //总量
                             arr=[];
                             for (var i = 14 ; i<26;i++){
                                 arr.push(res.data[0]['field'+i]||0);
                             }
                             this.dataAll.data2 = arr;   //产量
                             arr=[];
                             for (var i = 26 ; i<38;i++){
                                 arr.push(res.data[0]['field'+i]||0);
                             }
                             this.dataAll.data3 = arr;   //单产用量
                             arr=[];
                             for (var i = 38 ; i<50;i++){
                                 arr.push(res.data[0]['field'+i]||0);
                             }
                             this.dataAll.data4 = arr;   //限额
                             arr=[];
                             for (var i = 50 ; i<62;i++){
                                 arr.push(res.data[0]['field'+i]||0);
                             }
                             this.dataAll.data5 = arr;   //限额比列
                             arr = [];
                             for (var i = 1 ; i<13;i++){
                                 arr.push(i+'月')
                             }
                             this.dataAll.xdata= arr;
                             this.dataAll.ydata = this.dataAll.data1;
                         }
                         this.thData = this.dataAll.xdata;
                         this.getChart('ChartDiv',this.dataAll);
                });
            },
            getChart:function (id,data) {
                let myChart = echarts.init(document.getElementById(id));
                this.ChartData={
                    color: ['#30BFCD', '#234567','#F98317'],
                    tooltip: {
                        show:true,
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {

                        show : true,

                        feature : {

                            mark : {show: true},

                            dataView : {show: true, readOnly: false},

                            magicType : {show: true, type: ['line', 'bar']},

                            restore : {show: true},

                            saveAsImage : {show: true}

                        }

                    },
                    legend: {
                        data: [this.tabLabel],
                        textStyle: { //图例文字的样式
                            color: '#9AA1AA',
                            fontSize: 16
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data:data.xdata,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    series: [{
                        name: this.tabLabel,
                        type: 'bar',
                        stack: 'process',
                        data:data.ydata
                    },

                    ]
                };
                myChart.setOption(this.ChartData);
            },
            onChangePage:function(val){

            },

        },
        created:function(){

            this.dateMod = HttpUtil.getQueryString('dateMod');
            this.dateMod == "year" ? this.dataFiled=this.monthFiled:this.dataFiled=this.dayFiled;
            this.dateMod =='year'?this.day= TimeUtil.convertToString(new Date()).substr(0,4):this.day= TimeUtil.convertToString(new Date()).substr(0,7)
            this.dateMod=='year'?this.dateFormat='yyyy':this.dateFormat='yyyy-MM';
        },
        mounted:function(){
            this.tooltip = true;
        }
    });


</script>


</body>

</html>
